<template>
  <div class="contents">
    <PanelTitle title="成本分布" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/monitor/plant/cost/distribution/list",
    method: "get",
    params: {
      yearly: new Date().getFullYear()
    }
  });

  // let pieData = [
  //   { value: res.data.seedContrast, name: "种子种苗" },
  //   { value: res.data.rentContrast, name: "土地租金" },
  //   { value: res.data.artificialContrast, name: "人工费用" },
  //   { value: res.data.chemicalContrast, name: "农药化肥" },
  //   { value: res.data.materialsContrast, name: "材料" },
  //   { value: res.data.processContrast, name: "初加工费用" },
  // ];
  let legend = [
        "种子种苗",
        "土地租金",
        "人工费用",
        "农药化肥",
        "材料",
        "初加工费用",
      ]
  let pieData = res.data.map(item => {
    return {
      name: legend[item.type - 1],
      value: item.cost
    }
  })
  
  var myChart = echarts.init(maps.value);
  myChart.setOption({
    tooltip: {
      show: true,
      trigger: "item",
    },
    legend: {
      left: "left",
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      width: "44%",
      left: fitChartSize(10),
      data: legend,
      textStyle: {
        fontSize: fitChartSize(8),
        color: "#fff",
      },
    },
    color: ["#00C0FF", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5", "#35CBCB"],
    series: [
      {
        type: "pie",
        radius: [fitChartSize(20), fitChartSize(50)],
        center: ["50%", "45%"],
        roseType: "area",
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          // length: fitChartSize(14),
          length2: fitChartSize(40),
          lineStyle: {
            color: "#fff",
          },
        },
        labelLayout: {
          width: fitChartSize(90),
          verticalAlign: "bottom",
          align: "center",
          // dy: fitChartSize(-4),
          dx: fitChartSize(4),
        },
        label: {
          show: true,
          color: '#fff',
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          formatter: '{b} {d}%',

        },
        data: pieData,
      },
    ],
  });
});
</script>


<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}
</style>